<template>
	<div class="equation-top-item-content">
		<div class="equation-top-item-bg" style="opacity: 1; width: 262px;">
			<div class="equation-top-dom-item" @click="selectItem" data-code="+" data-type="calculation" data-poupe="" data-key="">+</div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="-" data-type="calculation" data-poupe="" data-key="">-</div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\pm" data-type="calculation" data-poupe="" data-key="">±</div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\mp" data-type="calculation" data-poupe="" data-key="">∓</div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\cdot" data-type="calculation" data-poupe="" data-key="">⋅
			</div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\ast" data-type="calculation" data-poupe="" data-key="">*
			</div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\circ" data-type="calculation" data-poupe="" data-key="">∘
			</div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\times" data-type="calculation" data-poupe="" data-key="">×
			</div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\div" data-type="calculation" data-poupe="" data-key="">÷
			</div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\%" data-type="calculation" data-poupe="" data-key="">%</div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\odot" data-type="calculation" data-poupe="" data-key="">⊙
			</div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\oplus" data-type="calculation" data-poupe="" data-key="">⊕
			</div>
		</div>
		<div class="equation-top-item-bg" style="opacity: 1; width: 220px;">
			<div class="equation-top-dom-item" @click="selectItem" data-code="\cap" data-type="calculation" data-poupe="" data-key="">∩
			</div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\cup" data-type="calculation" data-poupe="" data-key="">∪
			</div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\exists" data-type="calculation" data-poupe="" data-key="">∃
			</div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\forall" data-type="calculation" data-poupe="" data-key="">∀
			</div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\varnothing" data-type="calculation" data-poupe=""
				 data-key="">∅
			</div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\lor" data-type="calculation" data-poupe="" data-key="">∨
			</div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\land" data-type="calculation" data-poupe="" data-key="">∧
			</div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\neg" data-type="calculation" data-poupe="" data-key="">¬
			</div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\bot" data-type="calculation" data-poupe="" data-key="">⊥
			</div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\top" data-type="calculation" data-poupe="" data-key="">⊤
			</div>
		</div>
		<div class="equation-top-item-bg" style="opacity: 1; width: 178px;">
			<div class="equation-top-dom-item" @click="selectItem" data-code="\pi" data-type="calculation" data-poupe="" data-key="">π</div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\infty" data-type="calculation" data-poupe="" data-key="">∞
			</div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\partial" data-type="calculation" data-poupe="" data-key="">
				∂
			</div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="'" data-type="calculation" data-poupe="" data-key="">′</div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\mathbb{C}" data-type="calculation" data-poupe="" data-key="">
				ℂ
			</div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\mathbb{R}" data-type="calculation" data-poupe="" data-key="">
				ℝ
			</div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\triangle" data-type="calculation" data-poupe="" data-key="">
				△
			</div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\triangledown" data-type="calculation" data-poupe=""
				 data-key="">▽
			</div>
		</div>
		<div class="equation-top-item-bg" style="opacity: 1; width: 178px;">
			<div class="equation-top-dom-item" @click="selectItem" data-code="\angle" data-type="calculation" data-poupe="" data-key="">∠
			</div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\measuredangle" data-type="calculation" data-poupe=""
				 data-key="">∡
			</div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\parallel" data-type="calculation" data-poupe="" data-key="">
				∥
			</div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\perp" data-type="calculation" data-poupe="" data-key="">⊥
			</div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\cdots" data-type="calculation" data-poupe="" data-key="">⋯
			</div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\vdots" data-type="calculation" data-poupe="" data-key="">⋮
			</div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\ddots" data-type="calculation" data-poupe="" data-key="">⋱
			</div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\surd" data-type="calculation" data-poupe="" data-key="">√
			</div>
		</div>
		<div class="equation-top-item-bg" style="opacity: 1; width: 57px;">
			<div class="equation-top-dom-item" @click="selectItem" data-code="‰" data-type="calculation" data-poupe="" data-key="">‰</div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="‱" data-type="calculation" data-poupe="" data-key="">‱</div>
		</div>
	</div>
</template>
<script setup lang="ts">
const props = defineProps({
	append: {
		type: Function,
		default: () => {}  // 默认空函数，避免报错
	}
});
const emit = defineEmits(['fomule']);
const selectItem = (event: MouseEvent) => {
	// 获取触发事件的元素
	const target = event.currentTarget as HTMLElement;
	// 读取 data-code 属性值
	const code = target.dataset.code;
	props.append(code);
	emit('fomule', code);
};
</script>
<style scoped lang="scss">

</style>
